<template>
  <div class="page">
    <van-nav-bar
        :title="title"
        :left-text="leftText"
        :right-text="rightText"
        :left-arrow="leftArrow"
        fixed
        placeholder
        z-index="2022"
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'vant';

export default {
  name: 'MyNavBar',
  components: {
    [NavBar.name]: NavBar,
  },
  data() {
    return {};
  },
  computed: {
    // 动态获取路由中的title
    title() {
      console.log('%c ' + 'title', 'background: green; color: #fff;');
      console.log(this.$route);
      return this.$router.currentRoute.meta.title || '标题';
    },
  },
  props: {
    // 左边文案
    leftText: {
      type: String,
      default: '返回',
    },
    // 右边文案
    rightText: {
      type: String,
      default: '按钮',
    },
    // 显示返回按钮
    leftArrow: {
      type: Boolean,
      default: true,
    },
    // 有按钮事件，由父组件传递
    onClickRight: {
      type: Function,
      default() {
        console.log('右按钮');
      },
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  padding: 15px;
}
</style>
